<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-card header="主体设置" style="margin-bottom: 15px;">
        <el-form-item label="关联流程">
          <el-select v-model="step.bodyPart.relationProcessList" multiple collapse-tags clearable placeholder="请选择">
            <el-option v-for="item in processList" :key="item.key" :label="item.name" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item label="列表查询方式">
          <el-row :gutter="10">
            <el-radio
              v-model="step.bodyPart.queryType"
              label="SQL">
              SQL匹配模式
            </el-radio>
            <el-radio
              v-model="step.bodyPart.queryType"
              label="PARAM">
              参数模式
            </el-radio>
          </el-row>
          <el-row :gutter="10" v-if="step.bodyPart.queryType === 'SQL'">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入SQL"
              v-model="step.bodyPart.querySql">
            </el-input>
          </el-row>
          <template v-else-if="step.bodyPart.queryType === 'PARAM'">
            <el-row v-for="(item, index) in step.bodyPart.paramList" :key="index" style="margin-bottom: 15px;">
              <el-select v-model="item.tableName" clearable placeholder="请选择表名">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              &nbsp;&nbsp;
              <el-select v-model="item.columnName" clearable placeholder="请选择字段名">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              = 
              <el-select v-model="item.commonKey" clearable placeholder="请选择公共参数">
                <el-option
                  v-for="(item, index) in commonPara"
                  :key="index"
                  :label="item.name"
                  :value="item.key">
                </el-option>
              </el-select>
              &nbsp;&nbsp;
              <el-button type="danger" size="mini" circle icon="el-icon-delete" title="删除" @click="handleRemoveParam(item, index)"></el-button>
            </el-row>
            <el-row style="text-align: center;">
              <el-button
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="handleAddParam"
              >
                添加参数
              </el-button>
            </el-row>
          </template>
        </el-form-item>
        <el-form-item label="动态显示设置">
          <el-select v-model="step.showParaList" multiple collapse-tags clearable placeholder="请选择">
            <el-option
              v-for="(item, index) in commonPara"
              :key="index"
              :label="item.name"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
      </el-card>
      <el-card header="异常设置" style="margin-bottom: 15px;">
        <el-form-item label="是否开启">
          <el-switch
            v-model="step.exceptionalPart.exType"
            active-value="YES"
            inactive-value="NO"
          >
            </el-switch>
        </el-form-item>
        <template v-if="step.exceptionalPart.exType === 'YES'">
          <el-form-item label="查询方式">
            <el-row style="margin-bottom: 15px;">
              <el-checkbox v-model="step.exceptionalPart.queryType" true-label="SQL" false-label="">SQL匹配模式</el-checkbox>
            </el-row>
            <el-input
              v-if="step.exceptionalPart.queryType === 'SQL'"
              type="textarea"
              :rows="3"
              placeholder="请输入SQL"
              v-model="step.exceptionalPart.querySql">
            </el-input>
          </el-form-item>
          <el-form-item label="异常提示说明">
            <el-input
              placeholder="请输入异常提示说明"
              v-model="step.exceptionalPart.tip">
            </el-input>
          </el-form-item>
        </template>
      </el-card>
      <el-card header="激活按钮设置">
        <el-form-item label="按钮显示名称">
          <el-input v-model="step.activatePart.name" placeholder="请输入按钮显示名称" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="激活参数">
          <el-row v-for="(item, index) in step.activatePart.paramList" :key="index" style="margin-bottom: 15px;">
            <el-select v-model="item.commonKey" clearable placeholder="请选择">
              <el-option
                v-for="(item, index) in commonPara"
                :key="index"
                :label="item.name"
                :value="item.key">
              </el-option>
            </el-select>
            = 
            <el-select v-model="item.fieldName" clearable placeholder="请选择查询列表中的某个字段值" style="width: 250px;">
              <el-option
                v-for="(item, index) in step.bodyPart.tableSettingList"
                :key="index"
                :label="item.columnName"
                :value="item.fieldName">
              </el-option>
            </el-select>
            &nbsp;&nbsp;
            <el-button type="danger" size="mini" circle icon="el-icon-delete" title="删除" @click="handleRemoveActiveParam(item, index)"></el-button>
          </el-row>       
          <el-row style="text-align: center;">
            <el-button
              icon="el-icon-circle-plus-outline"
              type="text"
              @click="handleAddActiveParam"
            >
              添加激活参数
            </el-button>
          </el-row>
        
        </el-form-item>
        
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { getProcessList } from '@/api/workflow/bpmn/deploy'
export default {
  props: {
    commonPara: {
      type: Array,
      default: []
    },
    step: {
      type: Object,
      default: {}
    }
  },
  components: {
    
  },
  data() {
    return {
      processList: []
    }
  },
  watch: {
    stepObj: {
      handler(n) {
        n = n || {
          bodyPart: {
            paramList: [],
          },
          exceptionalPart: {},
          activatePart: {
            paramList: []
          }
        }
        n.bodyPart = n.bodyPart || {
          paramList: [],
        }
        n.exceptionalPart = n.exceptionalPart || {}
        n.activatePart = n.activatePart || {
          paramList: []
        }
        this.step = JSON.parse(JSON.stringify(n))
      },
      deep: true
    }
  },
  computed: {
  },
  async created() {
    await this.getProcessList()
  },
  methods: {
    async getProcessList() { // 获取子流程列表
      const res = await getProcessList()
      this.processList = res && res.data ? res.data : []
    },
    handleRemoveParam(item, index) {
      this.step.bodyPart.paramList.splice(index, 1)
    },
    handleAddParam() {
      this.step.bodyPart.paramList = this.step.bodyPart.paramList || []
      const item = { tableName: '', columnName: '', commonKey: ''}
      this.step.bodyPart.paramList.push(item)
    },
    handleAddActiveParam() {
      this.step.activatePart.paramList = this.step.activatePart.paramList || []
      const item = { param: '', column: ''}
      this.step.activatePart.paramList.push(item)
    },
    handleRemoveActiveParam(item, index) {
      this.step.activatePart.paramList.splice(index, 1)
    },
  }
}
</script>

<style scoped>

</style>
